<template>
  <div id="property">
    <div class="property-inner" v-if="!showLayer">
      <md-scroll-view :scrolling-x="false" ref="scrollView" :autoReflow="true">
        <md-notice-bar mode="link" icon="info-solid">法律：产权人的专有面积，代表表决权数大小</md-notice-bar>
        <div>
          <h4>证件类型</h4>
          <div class="papers-type">
            <md-radio name="1" v-model="papersType" label="闽(xxx)厦门市不动产权第xxx号" />
            <md-radio name="3" v-model="papersType" label="厦国土房证第xxx号" />
            <md-radio name="2" v-model="papersType" label="厦地房证第xxx号" />
            <md-radio name="4" v-model="papersType" label="自定义" />
          </div>
        </div>
        <div class="tip">
          <md-notice-bar mode="closable" type="warning" icon="warn">请按顺序上传证件图片</md-notice-bar>
        </div>
        <!-- 上传图片 -->
        <div class="certificate-upload" v-if="papersType != 4">
          <!-- 印花页 -->
          <h4>{{rowOneTitle}}</h4>
          <div class="row-1">
            <div class="preview" @click="showViewer(showImgViewerList[0])">
              <i class="show-icon"></i>
              <img v-if="showImgViewerList[0]" :src="showImgViewerList[0]" preview="1" alt />
            </div>
            <div class="image-reader-add">
              <div class="upload-img" v-if="imageList['reader1']">
                <img :src="imageList['reader1']"   alt />
              </div>
              <md-image-reader
                name="reader1"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#666"></md-icon>
              <p>上传印花页</p>
            </div>
          </div>
          <!-- 权利人页 -->
          <h4>{{rowTwoTitle}}</h4>
          <div class="row-2">
            <div class="preview" @click="showViewer(showImgViewerList[1])">
              <i class="show-icon"></i>
              <img v-if="showImgViewerList[1]" :src="showImgViewerList[1]" preview="2" alt />
            </div>
            <div class="image-reader-add">
              <div class="upload-img" v-if="imageList['reader2']">
                <img :src="imageList['reader2']" alt />
              </div>
              <md-image-reader
                name="reader2"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#666"></md-icon>
              <p>上传权利人页</p>
            </div>
          </div>
          <h4 v-if="papersType != 1">{{rowThreeTitle}}</h4>
          <div class="row-3" v-if="papersType != 1">
            <div class="preview" @click="showViewer(showImgViewerList[2])">
              <i class="show-icon"></i>
              <img v-if="showImgViewerList[2]" :src="showImgViewerList[2]" preview="3" alt />
            </div>
            <div class="image-reader-add">
              <div class="upload-img" v-if="imageList['reader3']">
                <img :src="imageList['reader3']" alt />
              </div>
              <md-image-reader
                name="reader3"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#666"></md-icon>
              <p>上传建筑面积</p>
            </div>
          </div>
        </div>
        <div class="certificate-upload" v-if="papersType == 4">
          <h4>上传自定义的所有页面图片</h4>
          <div class="row-4">
            <div
              class="preview"
              v-for="(item,index) in customImageList"
              @click="showViewer(item)"
              :key="index"
            >
              <img :src="item" alt :preview="index" />
            </div>
            <div class="image-reader-add">
              <md-image-reader
                name="reader4"
                @select="onReaderSelect"
                @complete="customOnReaderComplete"
                @error="onReaderError"
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#666"></md-icon>
              <p>上传自定义页</p>
            </div>
            <div class="save-custom">
              <md-button round type="default" size="small" @click="saveCustom">保存</md-button>
            </div>
          </div>
        </div>
        <!-- 已经添加的产权证列表 -->
        <div class="property-list" v-if="landinfo.length != 0">
          <h4>已添加产权证</h4>
          <div class="property-item" v-for="(item,index) in landinfo" :key="index">
            <md-bill>
              <div class="header-slot" slot="header">
                <h1 class="title">已添加您的产权证</h1>
                <p class="desc">{{item.certificate_number}}</p>
                <div class="del-btn" :index="index" @click="delPropertyItem(index)">
                  <md-icon name="delete" size="lg"></md-icon>
                </div>
              </div>
              <md-detail-item title="权力人">{{item.obligee || "未识别"}}</md-detail-item>
              <md-detail-item title="共有情况">{{item.common_onditions || ""}}</md-detail-item>
              <md-detail-item title="用途">{{item.for_purpose || "未识别"}}</md-detail-item>
              <md-detail-item title="建筑面积">{{item.built_up_area || "未识别"}}</md-detail-item>
              <div
                class="footer-slot"
                slot="footer"
                v-if="item.lan_yinhua_file && item.lan_detail_file"
              >
                <img :src="item.lan_yinhua_file" alt />
                <img :src="item.lan_detail_file" alt />
              </div>
            </md-bill>
          </div>
        </div>
        <!-- 同意共有情况 -->
        <div
          class="md-example-child md-example-child-agree"
          v-if="landinfo.length != 0 && landinfo[0].common_onditions != '' && landinfo[0].obligee != undefined"
        >
          <md-agree v-model="checked" size="md">我已和以上产权的共有人达成一致合意，在i业主平台上，由我参加业主大会投票</md-agree>
        </div>
        <!-- 按钮区 -->
        <div class="btn-block" v-if="landinfo.length !=0">
          <md-button round type="primary" @click="nextTo">下一步</md-button>
        </div>
        <div class="scroll-bottom-block"></div>
      </md-scroll-view>
    </div>

    <!-- 信息确认弹窗 -->
    <layer
      v-else
      class="input-layer"
      :landinfoItem1="landinfoItem1"
      :landinfoItem2="landinfoItem2"
      :landinfoItem3="landinfoItem3"
      :papersType="papersType"
      :papersImgIndex="papersImgIndex"
      v-on:savePropertyInfo="savePropertyInfo"
    ></layer>
  </div>
</template>

<script>
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩
import layer from "../common/propertyLayer"; //不不动产权注册
import https from "@/https";
import config from "@/config";
import {
  Toast,
  Dialog,
  ScrollView,
  NoticeBar,
  Icon,
  ImageReader,
  Tag,
  Agree,
  Button,
  Bill,
  DetailItem,
  Radio,
  RadioList,
} from "mand-mobile";

export default {
  components: {
    layer,
    [Dialog.name]: Dialog,
    [ScrollView.name]: ScrollView,
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    [Agree.name]: Agree,
    [Button.name]: Button,
    [Bill.name]: Bill,
    [DetailItem.name]: DetailItem,
    [Radio.name]: Radio,
    [RadioList.name]: RadioList,
  },
  name: "property",
  data() {
    return {
      showImgViewerList: [
        "/static/images/register/type-1-index.jpg",
        "/static/images/register/type-1-detail.jpg"
      ], //
      imgViewerList: {
        one: [
          "/static/images/register/type-1-index.jpg",
          "/static/images/register/type-1-detail.jpg"
        ],
        two: [
          "/static/images/register/type-2-index.jpg",
          "/static/images/register/type-2-detail.jpg",
          "/static/images/register/type-2-area.jpg"
        ],
        three: [
          "/static/images/register/type-3-index.jpg",
          "/static/images/register/type-3-detail.jpg",
          "/static/images/register/type-3-area.jpg"
        ]
      },
      papersType: "1", //证件类型
      papersImgIndex: 1, //上传的图片索引1 印花 2详情 3面积
      rowOneTitle: "不动产权印花页", //印花页标题
      rowTwoTitle: "不动产权权利人页", //产权人页面标题
      rowThreeTitle: "", //面积页标题
      rowOnePreview: "type-one", //印花页预览类型
      rowTwoPreview: "type-one", //印花页预览类型
      rowThreePreview: "type-one", //印花页预览类型

      showLayer: false, //产权证信息确认弹窗
      checked: true, // 是否同意i业主平台
      imageList: {
        reader1: "",
        reader2: "",
        reader3: ""
      },
      customImageList: [], //自定义图
      // 产权证参数
      landinfoItem1: {
        get_land_date: "", //发证时间
        id_number: "", //编号
        certificate_number: "", //不动产权证号
        obligee: "", //权利人
        common_onditions: "", //共有情况
        be_located: "", //坐落
        unit_number: "", //不动产单元号
        purpose: "", //权利类型
        nature: "", //权利性质
        for_purpose: "", //用途
        built_up_area: "", //面积
        use_begin_date: "", //使用年限
        other_params1: "", //其他状况1
        other_params2: "", //其他状况2
        other_params3: "", //其他状况3
        other_params4: "", //其他状况4
        lan_yinhua_file: "", //产权证印花页url
        lan_detail_file: "" //产权证详情页url
      },
      // 厦地房证
      landinfoItem2: {
        lan_yinhua_file: "", //产权证印花页url
        certificate_number: "", //不动产权证号

        obligee: "", //权利人
        id_card: "", //证件号码
        common_onditions: "", //共有情况
        be_located: "", //坐落
        nature: "", //权利性质
        for_purpose: "", //用途
        purpose: "", //权利类型
        use_begin_date: "", //使用年限
        lan_detail_file: "", //产权证详情页url

        built_structure: "", // 建筑结构
        number_room: "", // 房号 室号或部位
        level_plies: "", //层次
        number_plies: "", // 总层数
        get_land_date: "", // 填发日期
        unit_area: "", //宗地面积
        apportion_area: "", //分摊面积
        built_up_area: "", // 建筑面积
        remarks: "", // 附记 备注事项
        lan_area_file: "" //产权证面积页url
      },
      // 国土房证参数
      landinfoItem3: {
        lan_yinhua_file: "", //产权证印花页url
        certificate_number: "", //不动产权证号

        name: "", //产权证的名称
        common_onditions: "", //共有情况
        id_card: "", //证件号码
        be_located: "", //坐落
        use_begin_date: "", //使用年限
        for_purpose: "", //用途
        obligee: "", //权利人
        purpose: "", //权利类型
        floor_up_area: "", //占地面积
        lan_detail_file: "", //产权证详情页url

        get_land_date: "", // 填发日期
        built_up_area: "", // 建筑面积
        built_structure: "", // 建筑结构
        remarks: "", // 备注事项
        number_room: "", // 室号或部位
        organization: "", // 登记机构
        number_plies: "", // 总层数
        lan_area_file: "" //产权证面积页url
      },
      // 自定义证参数
      landinfoItem4: {
        files: "" //图片路径
      },
      landinfo: [] //提交的产权证信息列表
    };
  },
  watch: {
    papersType() {
      let val = this.papersType;
      let name = "";
      if (val == 1) {
        name = "不动产权";
        this.showImgViewerList = this.imgViewerList.one;
      } else if (val == 2) {
        name = "厦地房证";
        this.showImgViewerList = this.imgViewerList.two;
      } else if (val == 3) {
        name = "厦国土房证";
        this.showImgViewerList = this.imgViewerList.three;
      } else {
        name = "自定义";
      }
      this.rowOneTitle = name + "印花页";
      this.rowTwoTitle = name + "权利人页";
      this.rowThreeTitle = name + "面积页";
      this.imageList = {
        reader1: "",
        reader2: "",
        reader3: ""
      };
      this.customImageList = [];
    }
  },
  computed: {},
  methods: {
    //  上传图片
    onReaderSelect() {
      Toast.loading("图片识别中...");
    },
    // 产权。国土。厦地
    onReaderComplete(name, { dataUrl, file }) {
      let papersType = this.papersType;
      let _this = this;
      let genre = 1;
      if (papersType == 1) {
        genre = 1;
      } else if (papersType == 2) {
        genre = 2;
      } else if (papersType == 3) {
        genre = 0;
      }
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        let params = {
          image: dataUrl,
          genre
        };
        if (name == "reader1") {
          https
            .fetchPost(config.putChanquanImgae, params)
            .then(res => {
              console.log(res.data);
              if (res.data.code == 1) {
                let data = res.data.data.data;
                this.imageList.reader1 = dataUrl;
                if (papersType == 1) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem1.get_land_date = ret[0].word;
                    this.landinfoItem1.id_number = ret[1].word;
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem1.lan_yinhua_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 1;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                } else if (papersType == 2) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem2.certificate_number = ret[0].word; //不动产权证号
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem2.lan_yinhua_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 1;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                } else if (papersType == 3) {
                  if (data.isStructured == 1) {
                    let ret = data.ret;
                    this.landinfoItem3.certificate_number = ret[0].word; //不动产权证号
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem3.lan_yinhua_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 1;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                }
              } else {
                Toast.hide();
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else if (name == "reader2") {
          https
            .fetchPost(config.putChanquanImg, params)
            .then(res => {
              console.log(res.data);
              if (res.data.code == 1) {
                let data = res.data.data.data;
                this.imageList.reader2 = dataUrl;
                if (papersType == 1) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem1.certificate_number = ret[3].word; //不动产权证号
                    this.landinfoItem1.obligee = ret[11].word; //权利人
                    this.landinfoItem1.common_onditions = ret[12].word; //共有情况
                    this.landinfoItem1.be_located = ret[4].word; //坐落
                    this.landinfoItem1.unit_number = ret[5].word; //不动产单元号
                    this.landinfoItem1.purpose = ret[0].word; //权利类型
                    this.landinfoItem1.nature = ret[9].word; //权利性质
                    this.landinfoItem1.for_purpose = ret[1].word; //用途
                    this.landinfoItem1.built_up_area = ret[13].word; //面积
                    this.landinfoItem1.use_begin_date = ret[2].word; //使用年限
                    this.landinfoItem1.other_params1 = ret[10].word; //其他状况1
                    this.landinfoItem1.other_params2 = ret[6].word; //其他状况2
                    this.landinfoItem1.other_params3 = ret[7].word; //其他状况3
                    this.landinfoItem1.other_params4 = ret[8].word; //其他状况4
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem1.lan_detail_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 2;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                } else if (papersType == 2) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem2.obligee = ret[0].word; //权利人
                    this.landinfoItem2.id_card = ret[2].word; //证件号码
                    this.landinfoItem2.common_onditions = ret[3].word; //共有情况
                    this.landinfoItem2.be_located = ret[4].word; //坐落
                    this.landinfoItem2.nature = ret[5].word; //权利性质
                    this.landinfoItem2.for_purpose = ret[6].word; //用途
                    this.landinfoItem2.purpose = ret[7].word; //权利类型
                    this.landinfoItem2.use_begin_date = ret[8].word; //使用年限
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem2.lan_detail_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 2;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                } else if (papersType == 3) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem3.common_onditions = ret[1].word; //编号
                    this.landinfoItem3.be_located = ret[2].word; //坐落
                    this.landinfoItem3.use_begin_date = ret[3].word; //使用年限
                    this.landinfoItem3.for_purpose = ret[4].word; //用途
                    this.landinfoItem3.obligee = ret[5].word; //权利人
                    this.landinfoItem3.purpose = ret[6].word; //权利类型
                    this.landinfoItem3.name = ret[7].word_name; //产权证的名称
                    this.landinfoItem3.floor_up_area = ret[8].word; //面积
                    this.landinfoItem3.id_card = ret[0].word; //证件号码
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem3.lan_detail_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 2;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                }
              } else {
                Toast.hide();
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else if (name == "reader3") {
          https
            .fetchPost(config.putChanquanDateImg, params)
            .then(res => {
              console.log(res.data);
              if (res.data.code == 1) {
                let data = res.data.data.data;
                this.imageList.reader3 = dataUrl;
                if (papersType == 2) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem2.built_structure = ret[0].word; // 建筑结构
                    this.landinfoItem2.number_room = ret[1].word; // 房号 室号或部位
                    this.landinfoItem2.level_plies = ret[2].word; //层次
                    this.landinfoItem2.number_plies = ret[3].word; // 总层数
                    this.landinfoItem2.get_land_date = ret[5].word; // 填发日期
                    this.landinfoItem2.unit_area = ret[6].word; //宗地面积
                    this.landinfoItem2.apportion_area = ret[4].word; //分摊面积
                    this.landinfoItem2.built_up_area = ret[7].word; // 建筑面积
                    this.landinfoItem2.remarks = ret[8].word; // 附记 备注事项
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem2.lan_area_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 3;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                } else if (papersType == 3) {
                  if (data.isStructured) {
                    let ret = data.ret;
                    this.landinfoItem3.built_up_area = ret[6].word;
                    this.landinfoItem3.built_structure = ret[1].word;
                    this.landinfoItem3.remarks = ret[2].word;
                    this.landinfoItem3.number_room = ret[3].word;
                    this.landinfoItem3.get_land_date = ret[4].word;
                    this.landinfoItem3.organization = ret[7].word;
                    this.landinfoItem3.number_plies = ret[8].word;
                    let callBack = function(res) {
                      if (res.data.code == 1) {
                        _this.landinfoItem3.lan_area_file = res.data.data.url;
                        Toast.hide();
                        Toast.succeed("添加成功", 1000);
                        _this.showLayer = true;
                        _this.papersImgIndex = 3;
                      } else {
                        Toast.hide();
                        Toast.failed("图片上传失败，请重试");
                      }
                    };
                    this.saveBase64Image(dataUrl, callBack);
                  } else {
                    Toast.hide();
                    Toast.info("识别失败，请重新上传", 2000);
                  }
                }
              } else {
                Toast.hide();
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
        this.$previewRefresh();
      });
    },
    // 自定义
    customOnReaderComplete(name, { dataUrl, file }) {
      let _this = this;
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        this.customImageList.push(dataUrl);
        let callBack = function(res) {
          if (res.data.code == 1) {
            _this.landinfoItem4.files =
              _this.landinfoItem4.files + res.data.data.url + ",";
            Toast.hide();
            Toast.succeed("添加成功", 2000);
            this.$previewRefresh();

          } else {
            Toast.hide();
            Toast.failed("图片上传失败，请重试");
          }
        };
        this.saveBase64Image(dataUrl, callBack);
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    // 删除产权证
    delPropertyItem(index) {
      Dialog.confirm({
        title: "提示",
        content: "确认删除该条产权证？",
        confirmText: "确定",
        onConfirm: () => {
          this.landinfo.splice(index, 1);
        }
      });
    },
    // 改变选中状态
    onChange(name, checked) {
      console.log();
    },
    // 子组件传产权证信息
    savePropertyInfo(res) {
      Dialog.confirm({
        title: "提示",
        content: "我已确定产权证信息正确",
        confirmText: "确定",
        onConfirm: () => {
          let papersType = this.papersType; //证件类型
          let papersImgIndex = this.papersImgIndex; //上传的图片索引1
          if (papersType == 1 && papersImgIndex == 1) {
            this.landinfoItem1.get_land_date = res.get_land_date;
            this.landinfoItem1.id_number = res.id_number;
          } else if (papersType == 1 && papersImgIndex == 2) {
            let landinfoItem = res;
            this.landinfo.push(landinfoItem);
            this.imageList = {
              reader1: "",
              reader2: "",
              reader3: ""
            };
            this.landinfoItem1 = {
              get_land_date: "", //发证时间
              id_number: "", //编号
              certificate_number: "", //不动产权证号
              obligee: "", //权利人
              common_onditions: "", //共有情况
              be_located: "", //坐落
              unit_number: "", //不动产单元号
              purpose: "", //权利类型
              nature: "", //权利性质
              for_purpose: "", //用途
              built_up_area: "", //面积
              use_begin_date: "", //使用年限
              other_params1: "", //其他状况1
              other_params2: "", //其他状况2
              other_params3: "", //其他状况3
              other_params4: "", //其他状况4
              lan_yinhua_file: "", //产权证印花页url
              lan_detail_file: "" //产权证详情页url
            };
            Toast.info("保存成功，您可重复添加您其他产权证", 2500);
          } else if (papersType == 3 && papersImgIndex == 1) {
            this.landinfoItem3.certificate_number = res.certificate_number;
          } else if (papersType == 3 && papersImgIndex == 2) {
            this.landinfoItem3.name = res.name; //产权证的名称
            this.landinfoItem3.obligee = res.obligee; //权利人
            this.landinfoItem3.id_card = res.id_card; //证件号码
            this.landinfoItem3.be_located = res.be_located; //坐落
            this.landinfoItem3.common_onditions = res.common_onditions; //共有情况
            this.landinfoItem3.purpose = res.purpose; //权利类型
            this.landinfoItem3.for_purpose = res.for_purpose; //用途
            this.landinfoItem3.use_begin_date = res.use_begin_date; //使用年限
            this.landinfoItem3.floor_up_area = res.floor_up_area; //占地面积
          } else if (papersType == 3 && papersImgIndex == 3) {
            // this.landinfoItem3.built_up_area = res.built_up_area; //建筑面积
            // this.landinfoItem3.number_plies = res.number_plies; //总层数
            // this.landinfoItem3.number_room = res.number_room; //室号或部位
            // this.landinfoItem3.built_structure = res.built_structure; //建筑结构
            // this.landinfoItem3.remarks = res.remarks; //备注事项
            // this.landinfoItem3.organization = res.organization; //登记机构
            // this.landinfoItem3.get_land_date = res.get_land_date; // 填发日期
            let landinfoItem = res;
            this.landinfo.push(landinfoItem);
            this.imageList = {
              reader1: "",
              reader2: "",
              reader3: ""
            };
            this.landinfoItem3 = {
              lan_yinhua_file: "", //产权证印花页url
              certificate_number: "", //不动产权证号

              name: "", //产权证的名称
              common_onditions: "", //共有情况
              id_card: "", //证件号码
              be_located: "", //坐落
              use_begin_date: "", //使用年限
              for_purpose: "", //用途
              obligee: "", //权利人
              purpose: "", //权利类型
              floor_up_area: "", //占地面积
              lan_detail_file: "", //产权证详情页url

              get_land_date: "", // 填发日期
              built_up_area: "", // 建筑面积
              built_structure: "", // 建筑结构
              remarks: "", // 备注事项
              number_room: "", // 室号或部位
              organization: "", // 登记机构
              number_plies: "", // 总层数
              lan_area_file: "" //产权证面积页url
            };
              Toast.info("保存成功，您可重复添加您其他产权证", 2500);
          }else if (papersType == 2 && papersImgIndex == 1) {
            this.landinfoItem2.certificate_number = res.certificate_number;
          }else if (papersType == 2 && papersImgIndex == 2) {
              this.landinfoItem2.obligee = res.obligee ;//权利人
              this.landinfoItem2.id_card = res.id_card ;//证件号码
              this.landinfoItem2.common_onditions = res.common_onditions ;//共有情况
              this.landinfoItem2.be_located = res.be_located ;//坐落
              this.landinfoItem2.nature = res.nature ;//权利性质
              this.landinfoItem2.for_purpose = res.for_purpose ;//用途
              this.landinfoItem2.purpose = res.purpose ;//权利类型
              this.landinfoItem2.use_begin_date = res.use_begin_date ;//使用年限
          }else if(papersType == 2 && papersImgIndex == 3){
              let landinfoItem = res;
              this.landinfo.push(landinfoItem);
              this.imageList = {
                reader1: "",
                reader2: "",
                reader3: ""
              };
               this.landinfoItem2 = {
                lan_yinhua_file: "", //产权证印花页url
                certificate_number: "", //不动产权证号

                obligee: "", //权利人
                id_card: "", //证件号码
                common_onditions: "", //共有情况
                be_located: "", //坐落
                nature: "", //权利性质
                for_purpose: "", //用途
                purpose: "", //权利类型
                use_begin_date: "", //使用年限
                lan_detail_file: "", //产权证详情页url

                built_structure: "", // 建筑结构
                number_room: "", // 房号 室号或部位
                level_plies: "", //层次
                number_plies: "", // 总层数
                get_land_date: "", // 填发日期
                unit_area: "", //宗地面积
                apportion_area: "", //分摊面积
                built_up_area: "", // 建筑面积
                remarks: "", // 附记 备注事项
                lan_area_file: "" //产权证面积页url
              };
               Toast.info("保存成功，您可重复添加您其他产权证", 2500);
          }
          console.log("证件信息:", this.landinfo);
          this.showLayer = false;
        }
      });
    },
    // 保存自定义内容
    saveCustom() {
      this.landinfo.push(this.landinfoItem4);
      Toast.succeed("保存成功", 1500);
    },
    // 下一步
    nextTo() {
      if (!this.checked) {
        Toast.failed("请勾选以产权共有人达成一致");
        return;
      }
      if (this.landinfo.length == 0) {
        Toast.failed("请先添加产权证");
        return;
      } 
      let data = this.landinfo;
      if(this.papersType != 4){
        let obligee = this.landinfo[0].obligee;
        data.forEach(item => {
          if(item.obligee != obligee){
            Toast.failed("您的产权证权利人不一致，请分别注册");
            return;
          }
        });
      }
      this.$store.commit("savePropertyInfo", this.landinfo);
      this.$emit("nextTo", "p2");
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-tab-bar-item {
  &.is-active {
    color: $themeColor !important;
  }
}
.md-notice-bar {
  z-index: 1;
}
button {
  z-index: 1;
}
.pswp {
  z-index: 99999;
}
#property {
  .property-inner {
    height: 100vh;
  }
  .tip {
    padding: 20px 30px;
  }
  .papers-type {
    padding: 10px 70px;
  }
  h4 {
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    font-size: 30px;
    &::before {
      content: "";
      display: block;
      height: 38px;
      border-left: 6px solid $themeGold;
      margin-right: 28px;
    }
  }
  .certificate-upload {
    .row-1 {
      display: flex;
      justify-content: center;
      .preview {
        position: relative;
        height: 320px;
        width: 280px;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 40px;
        .show-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          background: url("/static/images/register/show-big.png") center
            no-repeat;
          background-size: 100%;
          z-index: 21;
        }
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 19;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 20;
        }
      }
      .image-reader-add {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: 0 0 4px 1px #ccc;
        border-radius: 10px;
        overflow: hidden;
        height: 320px;
        width: 280px;
        .upload-img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 10;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
    }
    .row-2 {
      display: flex;
      justify-content: center;
      .preview {
        position: relative;
        height: 320px;
        width: 280px;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 40px;
        .show-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          background: url("/static/images/register/show-big.png") center
            no-repeat;
          background-size: 100%;
          z-index: 21;
        }
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 19;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 20;
        }
      }
      .image-reader-add {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: 0 0 4px 1px #ccc;
        border-radius: 10px;
        overflow: hidden;
        height: 320px;
        width: 280px;
        .upload-img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 10;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
    }
    .row-3 {
      display: flex;
      justify-content: center;
      .preview {
        position: relative;
        height: 320px;
        width: 280px;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 40px;
        .show-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 64px;
          height: 64px;
          background: url("/static/images/register/show-big.png") center
            no-repeat;
          background-size: 100%;
          z-index: 21;
        }
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 19;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 20;
        }
      }
      .image-reader-add {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: 0 0 4px 1px #ccc;
        border-radius: 10px;
        overflow: hidden;
        height: 320px;
        width: 280px;
        .upload-img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 10;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
    }
    .row-4 {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      // justify-content: center;
      .preview {
        position: relative;
        height: 320px;
        width: 285px;
        border-radius: 10px;
        overflow: hidden;
        margin: 10px 30px;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 19;
        }
        &::before {
          content: "";
          display: block;
          position: absolute;
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 8;
        }
      }
      .image-reader-add {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: 0 0 4px 1px #ccc;
        border-radius: 10px;
        overflow: hidden;
        height: 320px;
        width: 280px;
        margin-top: 20px;
        margin-left: 30px;
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
      .save-custom {
        display: flex;
        width: 250px;
        padding: 50px 250px 0;
      }
    }
  }
  .change-tip,
  .area-tip {
    padding: 20px 30px;
    strong {
      color: #ff0000;
    }
  }
  .md-example-child-agree {
    padding: 10px 30px;
    font-size: 24px;
    margin-top: 60px;
    color: #858b9c;
  }
  .btn-block {
    margin-top: 80px;
    margin-bottom: 150px;
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
  .property-list {
    padding-top: 20px;
  }
  .property-item {
    padding: 20px 30px;
    .md-bill {
      background-color: #fff;
      box-shadow: 0 6px 24px #ccc;
      .md-detail-item {
        padding: 5px;
      }
      .md-bill-neck {
        position: relative;
        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 0;
          width: 36px;
          height: 36px;
          border-radius: 18px;
          background-color: red;
        }
        &::before {
          left: 0px;
        }
        &::after {
          right: 0px;
        }
      }
      .header-slot {
        position: relative;
        width: 100%;
        .del-btn {
          position: absolute;
          right: 0;
          top: 0;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $themeGold;
        }
        .title {
          color: #333;
          font-size: 22px;
          line-height: 1.2;
          width: 90%;
          strong {
            font-size: 50px;
          }
        }
        .desc {
          margin-top: 16px;
          color: #858b9c;
          font-size: 26px;
          line-height: 40px;
        }
      }
      .footer-slot {
        padding: 32px 0;
        border-top: solid 1px #e1e4eb;
        display: flex;
        justify-content: space-between;
        background: #fff;
        img {
          width: 280px;
          height: 300px;
        }
      }
    }
  }
  .scroll-bottom-block {
    display: block;
    height: 150px;
    background: #fff;
  }
}
</style>
